<template>
  <el-dialog
    :class="fullscreen ? 't-dialog--fullscreen' : 't-dialog'"
    :fullscreen="fullscreen"
    :visible.sync="dialogVisible"
    custom-class="view-dialog"
    width="65%"
    @opened="handleOpenDialog"
  >
    <div slot="title" class="t__dialog__header">
      <span class="el-dialog__title">{{ dialogTitle }}</span>
      <div class="t__dialog__menu">
        <i
          v-print="printForm"
          class="el-dialog__close el-icon-printer mr10"
        />
        <i
          :class="fullscreen ? 'el-icon-news' : 'el-icon-full-screen'"
          class="el-dialog__close"
          @click="handleFullScreen"
        />
      </div>
    </div>
    <el-row class="dialog-form" :style="{height: `${dialogHeight}px`}">
      <el-col :span="18" :xs="24" class="left" :style="{height: `${dialogHeight}px`}">
        <el-scrollbar>
          <generate-form
            v-if="formConf.fields.length && formModel&&isEditMode"
            :key="formParseKey"
            ref="generateForm"
            :form-conf="formConf"
            :page-form-model="formModel"
            style="margin-bottom: 40px"
          />
          <view-data v-else id="printForm" :style="{height: `${dialogHeight-25}px`}" :fields="fields"
                     :page-form-model="formModel" :is-print.sync="isPrint"
          />
        </el-scrollbar>
      </el-col>
      <el-col :span="6" :xs="24" class="right">
        <el-descriptions :column="1" title="基础信息">
          <el-descriptions-item
            v-for="field in fixedFields"
            :key="field.value"
            :label="field.label"
          >
            <span v-if="field.value === 'submitUaOs'">
              {{ formModel.submitUa ? formModel.submitUa.os.name : "" }}
              {{ formModel.submitUa ? formModel.submitUa.os.version : "" }}
            </span>
            <span v-if="field.value === 'submitBrowser'">
              {{ formModel.submitUa ? formModel.submitUa.browser.name : "" }}
              {{ formModel.submitUa ? formModel.submitUa.browser.version : "" }}
            </span>
            <span v-if="field.value === 'submitUaDevice'">
              {{ formModel.submitUa ? formModel.submitUa.device : "" }}
            </span>
            <span v-if="field.value === 'wxUserInfo'">
              {{ formModel.wxUserInfo ? formModel.wxUserInfo.nickname : "" }}
              <div>{{ formModel.wxUserInfo ? formModel.wxUserInfo.openid : "" }}</div>
            </span>
            <span v-else>
              {{ formModel[field.value] }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <span slot="footer" class="t-dialog__footer">
      <el-button v-if="checkBtnPerms('delete')" type="danger" plain @click="handleDelete">删 除</el-button>
      <el-button @click="handleCancel">取 消</el-button>
      <el-button
        v-if="openReply"
        type="success"
        icon="el-icon-bell"
        class="ml20"
        @click="$emit('openReply')"
      >
        回复
      </el-button>
      <el-button
        v-if="!isEditMode && canUpdate"
        type="primary"
        @click="handleEditMode"
      >修 改</el-button>
      <el-button v-if="isEditMode" type="primary" @click="handleUpdate">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import GenerateForm from "@/formgen/src/components/GenerateForm/GenerateForm"
import ViewData from './ViewData'
import {deleteFormDataRequest, updateFormDataRequest} from "../../../api/project/data"
import {jsonSimpleClone} from "../../../utils"
import {getSettingRequest} from "../../../api/project/setting"
import {removeHtmlTag} from "../../../formgen/src/utils"
import print from 'vue-print-nb'

export default {
  name: "ViewOrUpdate",
  components: {
    GenerateForm,
    ViewData
  },
  directives: {
    print
  },
  props: ["fields", "fixedFields", "formModel", "formKey", "canUpdate"],
  data() {
    return {
      isEditMode: false,
      formParseKey: new Date().getTime(),
      formConf: {
        fields: [],
        formKey: "",
        disabled: true,
        span: 24,
        size: "small",
        labelPosition: "top",
        labelWidth: 100,
        formRules: "rules",
        gutter: 15,
        formBtns: false,
        resetBtn: false,
        theme: {
          backgroundImg: "",
          showTitle: true,
          showDescribe: true,
          showNumber: false,
          btnsColor: null
        }
      },
      dialogVisible: false,
      dialogTitle: "查看",
      fullscreen: false,
      openReply: false,
      isPrint: false,
      dialogHeight: 500,
      printForm: {
        id: "printForm",
        popTitle: '',
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style>  #printForm { width: 100%;  }  .not-print {display: none!important } .print{ display: block!important}<style>',
        previewBeforeOpenCallback(vue) {
          console.log('正在加载预览窗口')
        },
        previewOpenCallback(vue) {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback(vue) {
          console.log('打开之前')
        },
        openCallback(vue) {
          console.log('执行了打印')
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      }
    }
  },
  watch: {
    fields: {
      handler: function (val, oldVal) {
        this.formConf.fields = val.filter((item) => {
          return item.scheme
        }).map((item) => {
          if (item.scheme) {
            item.scheme.viewMode = true
            // 去除标签中富文本
            item.scheme.config.label = removeHtmlTag(item.scheme.config.label)
          }
          return item.scheme
        })
      },
      immediate: true
    }
  },
  created() {
    this.queryUserProjectSetting()
  },
  methods: {
    checkBtnPerms(btn) {
      return this.$parent.checkBtnPerms(btn)
    },
    handleOpenDialog() {
      this.dialogHeight = document.querySelector('.view-dialog').clientHeight - 160
    },
    showDialog() {
      this.formConf.disabled = true
      this.dialogTitle = "查看"
      this.formParseKey = new Date().getTime()
      this.isEditMode = false
      this.dialogVisible = true
    },
    handleCancel() {
      if (this.isEditMode) {
        this.isEditMode = false
        this.formConf.disabled = true
        return
      }
      this.dialogVisible = false
      this.$emit("reload")
    },
    handleEditMode() {
      this.isEditMode = true
      this.dialogTitle = "编辑"
      this.formConf.disabled = false
    },
    handleFullScreen() {
      this.fullscreen = !this.fullscreen
    },
    // 查询操作按钮
    queryUserProjectSetting() {
      getSettingRequest(this.formKey).then((res) => {
        if (res.data) {
          this.openReply = res.data.openReply
        }
      })
    },
    handleDelete() {
      this.$alert("删除后不可恢复，是否确认删除该数据？", "删除问卷数据", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action === "confirm")
            deleteFormDataRequest([this.formModel.id], this.formKey).then(
              (res) => {
                this.msgSuccess("删除成功")
                this.dialogVisible = false
                this.$emit("reload")
              }
            )
        }
      })
    },
    handleUpdate() {
      let formModel = jsonSimpleClone(this.$refs.generateForm.formModel)
      // 问卷中字段名规则为字段类型时间戳 移除不符合规则的数据 不然会有其他的比如提交时间等数据
      let tempFormModel = {}
      // 保留formModel中包含数字的属性
      for (let key in formModel) {
        let bool = /.*\d+.*/g.test(key)
        if (bool) {
          tempFormModel[key] = formModel[key]
        }
      }
      updateFormDataRequest({
        id: this.formModel.id,
        completeTime: null,
        formKey: this.formKey,
        submitOs: "",
        submitBrowser: "",
        submitUa: null,
        wxUserInfo: null,
        wxOpenId: "",
        originalData: tempFormModel
      }).then((res) => {
        this.msgSuccess("修改成功")
        this.dialogVisible = false
        setTimeout(() => {
          this.$emit("reload")
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-form {
  overflow: hidden;

  .left {
    overflow: auto;
    border-right: var(--color-bg) solid 1px;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .right {
    padding: 10px;
  }
}

.operate-btns {
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow-y: hidden !important;
}

.t-dialog .left {
  //height: 700px !important;
}

.t-dialog--fullscreen .left {
  padding: 50px;
  height: 80vh !important;
}


</style>
